<template>
  <div>
    <el-row
      v-for="(gcsListItem, gcsListIndex) in gcsList"
      :key="'gcsList' + gcsListIndex"
    >
      <el-row class="card-content item">
        {{ gcsListItem.gcsItemName }}
      </el-row>
      <el-row class="card-content">
        <div class="radio-flex radio-box">
          <el-radio
            v-for="gcsItem in gcsListItem.gcsItemList"
            :key="gcsItem.gcsCode"
            v-model="gcsForm['gcs' + gcsListIndex]"
            :label="gcsItem.gcsCode"
            @change="scoreChange"
          >
            {{ gcsItem.gcsName }}
          </el-radio>
        </div>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'gcs',
    event: 'getGcs'
  },
  props: {
    gcs: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      gcsForm: {
        gcs0: '',
        gcs1: '',
        gcs2: ''
      },
      // gcs评分
      gcsList: [
        {
          gcsItemName: '睁眼',
          gcsItemList: [
            {
              gcsName: '无睁眼',
              gcsCode: '1'
            },
            {
              gcsName: '疼痛刺激睁眼',
              gcsCode: '2'
            },
            {
              gcsName: '语言刺激睁眼',
              gcsCode: '3'
            },
            {
              gcsName: '自发睁眼',
              gcsCode: '4'
            }
          ]
        },
        {
          gcsItemName: '语言',
          gcsItemList: [
            {
              gcsName: '无发音',
              gcsCode: '1'
            },
            {
              gcsName: '只能发音',
              gcsCode: '2'
            },
            {
              gcsName: '只能说（不适当）单词',
              gcsCode: '3'
            },
            {
              gcsName: '言语错乱',
              gcsCode: '4'
            },
            {
              gcsName: '正常交谈',
              gcsCode: '5'
            }
          ]
        },
        {
          gcsItemName: '运动',
          gcsItemList: [
            {
              gcsName: '无反应',
              gcsCode: '1'
            },
            {
              gcsName: '异常伸展（去脑状态）',
              gcsCode: '2'
            },
            {
              gcsName: '异常屈曲（去皮层状态）',
              gcsCode: '3'
            },
            {
              gcsName: '对疼痛刺激屈曲反应',
              gcsCode: '4'
            },
            {
              gcsName: '对疼痛刺激定位反应',
              gcsCode: '5'
            },
            {
              gcsName: '按吩咐动作',
              gcsCode: '6'
            }
          ]
        }
      ]
    }
  },
  watch: {
    gcs() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.gcs && this.gcs != null) {
        const arr = this.gcs.split('|')
        arr.forEach((el, index) => {
          this.gcsForm['gcs' + index] = el
        })
      } else {
        this.gcsForm = {
          gcs0: '',
          gcs1: '',
          gcs2: ''
        }
      }
    },
    scoreChange() {
      let sum = 0
      const arr = []
      for (const key in this.gcsForm) {
        if (this.gcsForm[key]) {
          arr.push(this.gcsForm[key])
          sum += parseInt(this.gcsForm[key])
        } else {
          arr.push('')
        }
      }
      this.$emit('getGcs', arr.join('|'))
      this.$emit('totle', sum + '')
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  padding-top: 6px;
  padding-bottom: 6px;
}
.card-content {
  padding-left: 3%;
  font-size: 14px !important;
  .el-radio {
    min-width: 80px;
  }
  .radio-flex,
  .radio-flex-small {
    .small-distance {
      margin-right: 0px;
      min-width: 60px !important;
    }
    .el-radio {
      min-width: 110px;
      margin: 6px 10px;
    }
  }
}
</style>
